<template>
    <div>
        <v-dialog
            title="应收调整"
            :show.sync="dialogVisible"
            @beforeClose="beforeClose"
            width="1200px">
            <div class="card-box">
                <el-form ref="editForm" :model="form" class="form-wrap" size="small" :rules="rules">
                    <!--<el-form-item label="应收款单单号" prop="chargeProject">
                        <el-input disabled="disabled" value="HT93920"></el-input>
                    </el-form-item>-->
                    <!--<el-form-item label="非税单号" prop="projectName">
                        <el-input disabled="disabled" value="HT93920"></el-input>
                    </el-form-item>-->
                    <el-form-item label="关联合同编码" prop="contractCode">
                        <el-input disabled="disabled" v-model="form.contractCode"></el-input>
                    </el-form-item>
                    <el-form-item label="调整方式" prop="adjustmentType">
                        <el-select v-model="form.adjustmentType"  placeholder="请选择">
                            <el-option
                                v-for="item in adjustment_type"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>

                    </el-form-item>
                    <el-form-item label="说明" prop="remarks">
                        <el-input  v-model="form.remarks"></el-input>
                    </el-form-item>

                </el-form>
                <el-table :data="tableDataArr"  style="width: 100%">
                    <!--<el-table-column prop="projectName" label="项目名称" width="150"></el-table-column>
                    <el-table-column prop="buildingName" label="楼栋" width="120"></el-table-column>-->
                    <el-table-column prop="projectName" label="物业名称" width="120"></el-table-column>
                    <el-table-column prop="buildingArea" label="建筑面积(m²)" width="120"></el-table-column>
                    <el-table-column prop="costProjectName" label="费用对象" width="120"></el-table-column>
                    <el-table-column prop="chargeProjectName" label="收费项目" width="120"></el-table-column>
                    <el-table-column prop="costPeriodStart" label="费用周期" width="260">
                        <template slot-scope="scope">
                            {{scope.row.costPeriodStart}}至{{scope.row.costPeriodEnd}}

                        </template>
                    </el-table-column>
                    <el-table-column  prop="receivableDate" label="应收日期" width="120">
                        <template slot-scope="scope">
                            <el-date-picker
                                v-model="scope.row.receivableDate "
                                type="date"
                                value-format="yyyy-MM-dd"
                                format="yyyy-MM-dd"
                                placeholder="应收日期"
                            ></el-date-picker>
                        </template>
                    </el-table-column>
                    <el-table-column prop="receivableMoney"  label="应收金额" width="120">
                        <template slot-scope="scope">
                            <el-input v-model="scope.row.receivableMoney" placeholder="请输入"></el-input>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <span slot="foot">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button @click="commit">提 交</el-button>
          </span>
        </v-dialog>
    </div>
</template>

<script>
import engineerList from '@/components/engineer-list'
import {addObj} from '../../../api/finance-collection-receivable-adjustment'
import uploadMedia from '@/components/upload-media'
import BaseLoad from '@/assets/vue-mixin/BaseLoad'
import {mapState} from 'vuex'
import {validateEditTable} from "@/utils";
export default {
    mixins: [BaseLoad],
    components: { uploadMedia,engineerList},
    computed: {
        ...mapState({
            adjustment_type: state => {
                let data = state.dict.find(item => item.type === "adjustment_type") || {}
                let list = data.children || []
                return data.children || []
            },
        })
    },
    data() {
        return {
            fileSize: 50,
            formData: {},
            input: '',
            value: '',
            area: [],
            form: {
                payStatus: '',
                contractCode: '',
                adjustmentType: '',
                chargeProject: '',
                projectName: '',
                contractName: '',
                receivableMoney: '',
                costProjectName: '',
                costPeriodStart: '',
                costPeriodEnd: '',
                receivableDate: '',
                billNumber: '',
                taxAmount: '',
                remarks: '',
                costPeriodArr: [],
            },
            form1: '',
            selectDataArr: [],
            dialogVisible: false,
            isEdit: false,
            rules: {
                receivableMoney:[{ required: true, message: '请选择缴费状态', trigger: 'blur'}],

                payStatus: [{required: true, message: '请选择缴费状态', trigger: 'blur'}],
                adjustmentType: [{required: true, message: '请选择调整方式', trigger: 'blur'}]
            },
            rules1:{
                receivableMoney:[{ required: true, message: '请选择缴费状态', trigger: 'blur'}],

            },
            editTableRules: [
                {attribute: 'receivableDate', label: '应收日期'},
                {attribute: 'receivableMoney',label: '应收金额'}
            ],
            tableDataArr:[{
                projectName: '',
                buildingArea: '',
                costProjectName: '',
                chargeProject: '',
                costMonth: '',
                chargeProjectName:'',
                receivableDate: '',
                costPeriodStart: '',
                costPeriodEnd:'',
                receivableMoney: '',
                costPeriodArr: [],
                receivableId: '',
                remarks:'',
            }],
        }
    },
    mounted() {
    },
    methods: {
        show(item) {
            this.dialogVisible = true
            setTimeout(() => {
                this.isEdit = false
                this.$refs.editForm.resetFields()
                if (item) {
                    this.isEdit = true
                    this.form = item
                    console.log(item)
                    Object.keys(this.form).forEach(key => {
                        this.form[key] = item[key]
                    })
                    this.tableDataArr[0].projectName = this.form.projectName
                    this.tableDataArr[0].buildingArea = this.form.buildingArea
                    this.tableDataArr[0].costProjectName = this.form.costProjectName
                    this.tableDataArr[0].chargeProject = this.form.chargeProject
                    this.tableDataArr[0].chargeProjectName = this.form.chargeProjectName
                    this.tableDataArr[0].receivableDate = this.form.receivableDate
                    this.tableDataArr[0].costPeriodStart = this.form.costPeriodStart
                    this.tableDataArr[0].costPeriodEnd = this.form.costPeriodEnd
                    this.tableDataArr[0].receivableMoney = this.form.receivableMoney
                    this.form.remarks = ''
                }
            }, 200)

        },
        commit() {
            this.$refs.editForm.validate(valid => {
                if (valid) {
                    this.tableDataArr[0].adjustmentType = this.form.adjustmentType
                    this.tableDataArr[0].receivableId = this.form.receivableId
                    this.tableDataArr[0].remarks = this.form.remarks
                    //validateEditTable(this.tableDataArr[0], this.editTableRules).then((e) => {
                    //    if (e) {
                            addObj(this.tableDataArr[0]).then(resp => {
                                if (resp.data.data) {
                                    this.suc('添加成功')
                                    this.dialogVisible = false
                                    this.handleCancel()
                                    //alert('resetList')
                                    this.$emit('resetList')
                                } else {
                                    this.err('添加失败')
                                }
                            })
                   //     } else {
                            // console.log('2', e)
                    //    }
                    //})
                }
            })
        },
        handleCancel() {
            this.dialogVisible = false
            this.handleEmpty()
        },
        handleEmpty() {
            this.form.adjustmentType = ''
            this.form.receivableId = ''
            this.form.projectName= ''
        },
        beforeClose(done) {
            done()
        }
    }
}
</script>

<style lang='scss' scoped>


@include data-title();

@include info-list(2);
@include formWrap(3);
</style>
